<script setup lang="ts">
import { ref } from "vue";
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import { useRole } from "./utils/hook";

defineOptions({
  name: "Welcome"
});
const uploadRef = ref();

const { fileList, loading, beforeUpload, onExceed, beforeRemove } = useRole();
</script>

<template>
  <el-card shadow="never">
    <div
      v-loading="loading"
      class="h-[calc(100vh-200px)]"
      element-loading-text="校队中"
    >
      <el-scrollbar>
        <el-upload
          ref="uploadRef"
          :before-upload="beforeUpload"
          :before-remove="beforeRemove"
          :on-exceed="onExceed"
          :file-list="fileList"
          :limit="1"
          drag
          multiple
          action="#"
          :auto-upload="true"
          style="margin-top: 200px"
          accept=".docx"
        >
          <div class="el-upload__text">
            <IconifyIconOffline
              :icon="UploadIcon"
              width="50"
              class="m-auto mb-2"
            />
            可点击或拖拽上传
          </div>
          <div class="el-upload__tip">只能上传docx文件</div>
        </el-upload>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
:deep(.el-table__row.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

:deep(.el-table__row.success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
